import {SysDictValueData, SysDictValueAdd} from "@/pages/system/dict/value/type";
import {ReactNode} from "react";
import {UseFetchDataAction} from "@ant-design/pro-table/es/typing";
import {Button, Space, Tag} from "antd";
import {ProColumns} from "@ant-design/pro-table";

import {OptionActions} from "@/type/type";
import AddSysDictValue from "@/pages/system/dict/value/list/components/AddSysDictValue";


// @ts-ignore
const columns: ProColumns<SysDictValueData> = (optionAction: OptionActions<SysDictValueAdd> & { enum_: boolean }) => {
  return [
    {
      dataIndex: "index",
      valueType: "index",
    },
    {
      title: "名称",
      dataIndex: "label",
      align: 'center',
    },
    {
      title: "值",
      dataIndex: "value",
      align: 'center',
      hideInSearch: true
    },
    {
      title: "描述",
      dataIndex: "desc",
      align: 'center',
      hideInSearch: true
    },
    {
      title: "值类型",
      dataIndex: "type",
      align: 'center',
      hideInSearch: true
    },
    {
      title: "颜色",
      dataIndex: "color",
      align: 'center',
      hideInSearch: true,
      render: (text: ReactNode, record: SysDictValueData, index: number, action: UseFetchDataAction<SysDictValueData>) => {
        // @ts-ignore
        return <Tag color={record.color} style={{height: 20, width: 30}} bordered={false}></Tag>
      }
    },
    {
      title: "状态",
      dataIndex: "status",
      align: 'center',
      hideInSearch: true,
      render: (text: ReactNode, record: SysDictValueData, index: number, action: UseFetchDataAction<SysDictValueData>) => {
        const editStatus = (record: SysDictValueData) => {
          optionAction.edit({
            ...record,
            status: !record.status
          })
        }
        return record.status ?
          (<Tag color="green" onClick={() => editStatus(record)}>启用</Tag>) :
          (<Tag color="yellow" onClick={() => editStatus(record)}>停用</Tag>)
      }
    },
    {
      title: "操作",
      valueType: 'option',
      align: "center",
      key: "option",
      width: "200px",
      render: (text: ReactNode, record: SysDictValueData, index: number, action: UseFetchDataAction<SysDictValueData>) => {
        return (
          <Space>
            <AddSysDictValue enum_={optionAction.enum_} initialValues={record} {...optionAction.editModal(record)}/>
            <Button type="link" danger onClick={() => optionAction.remove([record.id])}>删除</Button>
          </Space>
        )
      }
    }
  ]
}
export default columns;
